/* ===== Smartex Dark Theme (starfield fix) ===== */

/* Core vars (as you had) */
:root {
  --bg:#000; --text:#fff; --muted:#ffffff; --accent:#f00;
  --maxw:1140px; --header-h:56px;

  --cta-red-spot: radial-gradient(1200px 400px at 20% -10%,rgba(255,45,45,.12),rgba(255,45,45,0) 42%);
  --cta-cool-grad: linear-gradient(180deg,rgba(106,166,255,.28),rgba(126,240,214,.22));
  --cta-ring: hsla(352,80%,58%,.40);
  --cta-shadow: 0 10px 18px rgba(0,0,0,.22), 0 6px 18px rgba(255,0,0,.16);
  --cta-shadow-hover: 0 14px 26px rgba(0,0,0,.24), 0 8px 24px rgba(255,0,0,.22);
}

/* Base */
html { scroll-padding-top: var(--header-h,56px); }
body, .page { background:#000 !important; color:#fff !important; }
/* pad content below fixed header (kept in sync by JS) */
body { padding-top: var(--header-h) !important; }
header, .site-header { background:#000 !important; }
.sx-container { max-width:var(--maxw); margin:0 auto; padding:0 16px; }
.sx-hero, .sx-section { background:transparent !important; } /* make sure stars can show */

/* ---------- STARFIELD (page-wide, CMS-proof) ---------- */
.sx-stars {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient( rgba(0,0,0,.20), rgba(0,0,0,.20) ),
    url("/smartiverse-bg.png") center / cover no-repeat;
  opacity:.50;
}
.sx-content { position:relative; z-index:1; }
.sx-page { background:transparent !important; }

/* Typography (yours) */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color:#fff !important;
  text-decoration:none !important;
}
h1 { font-size:36px !important; line-height:1.2 !important; font-weight:700 !important; margin-bottom:16px !important; }
h2 { font-size:28px !important; line-height:1.3 !important; font-weight:600 !important; margin-bottom:14px !important; }
h3 { font-size:22px !important; line-height:1.4 !important; font-weight:600 !important; margin-bottom:12px !important; }
h4, h5, h6 { font-size:18px !important; line-height:1.4 !important; font-weight:500 !important; }
body, p, li, span { font-size:16px !important; line-height:1.6 !important; margin-bottom:14px !important; color:#fff !important; }
.sv-muted, .smallText { font-size:15px !important; line-height:1.5 !important; color:rgba(255,255,255,.75) !important; }

/* Links */
body a { color:var(--accent) !important; text-decoration:none; }
body a:hover { text-decoration:underline; }

/* Hero */
.sx-hero {
  min-height:auto !important;
  padding:40px 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.sx-hero h1 { font-size:44px; color:#fff !important; }

/* Cards */
.sx-card, .sx-linkcard {
  background:transparent !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:18px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.sx-card:hover, .sx-linkcard:hover {
  transform:translateY(-4px);
  box-shadow:0 6px 20px rgba(255,0,0,.3);
}
.sx-card.sx-valuecard {
  background-image:
    radial-gradient(1200px 400px at 20% 0%, rgba(255,45,45,.16), transparent 40%),
    linear-gradient(135deg, rgba(106,166,255,.18), rgba(126,240,214,.18)) !important;
}

/* Forms */
input, textarea, select {
  background:#111 !important; color:#fff !important;
  border:1px solid #333 !important; border-radius:10px !important;
  width:100% !important; padding:12px 14px !important;
}
input::placeholder, textarea::placeholder { color:#ccc !important; font-size:14px !important; }

/* Navbar / Footer */
/* Make header fixed so show/hide works instantly anywhere */
.navbar.navbar-inverse {
  background:#000 !important;
  padding:2px 0 !important;
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:1030;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition: transform 200ms ease, box-shadow 200ms ease;
  transform: translateY(0); /* default visible */
}
/* Hidden state */
.navbar.navbar-inverse.navbar--hidden {
  transform: translateY(-100%);
}

.footer, .sx-footer {
  width:100%; text-align:center !important; padding:4px 0 !important; background:transparent !important;
}

/* Buttons (rebaked CTA with red/grey hover fade) */
.sx-cta, .sx-submit, button.sx-submit, .sv-cta .sx-submit, .sv-cta button.sx-submit,
.sv-cta .actions > .sx-submit, .sv-cta .actions > button.sx-submit,
#betaForm .sx-submit, #betaForm button[type="submit"], #betaForm input[type="submit"],
a.button, .button1, a.sx-cta, a.button1, .sx-submit.sx-submit {
  -webkit-appearance:none !important; appearance:none !important; -webkit-tap-highlight-color:transparent;
  background-image: var(--cta-red-spot), var(--cta-cool-grad) !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 999px !important; /* pill shape */
  font-weight: 700 !important;
  padding: 12px 20px !important;
  display: inline-block !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  font-size: 16px !important;
  text-align: center !important;
  cursor: pointer;
  box-shadow: var(--cta-shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, background 160ms ease, color 0s;
  color: #fff !important;
}

/* Force white text on all link states */
a.sx-cta:link, a.sx-cta:visited, a.sx-cta:hover, a.sx-cta:active,
a.button:link, a.button:visited, a.button:hover, a.button:active,
a.button1:link, a.button1:visited, a.button1:hover, a.button1:active,
button.sx-submit, .sv-cta .sx-submit, #betaForm .sx-submit,
#betaForm button[type="submit"], #betaForm input[type="submit"] {
  color: #fff !important;
  text-decoration: none !important;
}

/* DIAGNOSTIC: make hover obviously red/grey */
.sx-cta:hover, .sx-submit:hover, button.sx-submit:hover,
.sv-cta .sx-submit:hover, #betaForm .sx-submit:hover,
#betaForm button[type="submit"]:hover, #betaForm input[type="submit"]:hover,
a.button:hover, .button1:hover {
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(255,45,45,.28), rgba(255,45,45,0) 42%),
    linear-gradient(180deg, rgba(180,180,180,.40), rgba(120,120,120,.26)) !important; /* grey wash */
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--cta-shadow-hover) !important;
  color: #fff !important;
}

/* Active */
.sx-cta:active, .sx-submit:active, button.sx-submit:active,
.sv-cta .sx-submit:active, #betaForm .sx-submit:active,
#betaForm button[type="submit"]:active, #betaForm input[type="submit"]:active,
a.button:active, .button1:active {
  filter: brightness(0.99) !important;
  transform: translateY(0) !important;
  color: #fff !important;
}

/* Focus */
.sx-cta:focus-visible, .sx-submit:focus-visible, button.sx-submit:focus-visible,
.sv-cta .sx-submit:focus-visible, #betaForm .sx-submit:focus-visible,
#betaForm button[type="submit"]:focus-visible, #betaForm input[type="submit"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--cta-ring), var(--cta-shadow-hover) !important;
  color: #fff !important;
}

/* Outline variant */
.button1.button-outline,
.sx-cta.button-outline,
a.sx-cta.button-outline,
a.button.button-outline,
a.button1.button-outline {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.36) !important;
  box-shadow: none !important;
}
.button1.button-outline:hover,
.sx-cta.button-outline:hover,
a.sx-cta.button-outline:hover,
a.button.button-outline:hover,
a.button1.button-outline:hover {
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.22), 0 6px 18px rgba(255,0,0,0.18) !important;
  color: #fff !important;
}

/* ===== Discovery Survey cards & custom selects (rebaked) ===== */

/* 2-column grid on desktop */
.sx-survey{
  display:grid;
  grid-template-columns:repeat(2,minmax(360px,1fr));
  gap:20px;
}
@media (max-width:900px){ .sx-survey{grid-template-columns:1fr;} }

/* Cards: soften red glow ~20% */
.sx-q{
  position: relative;                 /* stacking context per card */
  z-index: 1;
  background-image:
    radial-gradient(1200px 400px at 20% 0%, rgba(255,45,45,.13), transparent 40%),
    linear-gradient(135deg, rgba(106,166,255,.18), rgba(126,240,214,.18));
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:16px 16px 18px;
  box-shadow:0 10px 18px rgba(0,0,0,.22), 0 16px 42px rgba(255,0,0,.22);
  transition:transform .2s ease, box-shadow .2s ease, outline-color .15s ease, z-index .1s ease;
}
.sx-q:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(0,0,0,.28), 0 26px 70px rgba(255,0,0,.36);
}

/* When interacting inside a card (e.g., dropdown open), pull it above neighbors */
.sx-q:focus-within{ z-index: 1000; }

/* Titles & lists */
.sx-qtitle{color:#fff;font-size:18px;font-weight:700;line-height:1.35;margin:0 0 12px;}
.sx-qlist{margin:6px 0 8px 18px;padding:0;}
.sx-qlist li{margin:2px 0}

/* Answered state (also used as accessibility fallback) */
.sx-q.answered,
.sx-q:focus-within{
  outline:2px solid #1ee99b;            /* Smartiverse green */
  outline-offset:0;
  box-shadow:0 14px 28px rgba(0,0,0,.30), 0 22px 60px rgba(30,233,155,.18);
}

/* Form fields within cards */
.sx-field{margin:6px 0 10px}

/* Comment block + counters */
.sx-comment small{color:#fff;display:block;margin:6px 0 6px}
.sx-count{text-align:right;font-size:12px;color:#aaa}

/* Textareas */
.sx-comment textarea{
  background:#111;color:#fff;border:1px solid #333;border-radius:10px;
  width:100%;padding:12px 14px;resize:vertical;
}
.sx-comment textarea::placeholder{color:#ccc}

/* Hide “elaborate” for Q1–Q6 only */
.sx-survey .sx-q:nth-child(-n+6) .sx-comment,
.sx-survey .sx-q:nth-child(-n+6) .sx-count { display:none !important; }

/* Q7 full-width + show comment */
.sx-survey .sx-q:last-child { grid-column: 1 / -1; }
.sx-survey .sx-q:last-child .sx-comment,
.sx-survey .sx-q:last-child .sx-count { display:block !important; }

/* ---------- Custom select (no native blue) ---------- */
.sx-select{ position:relative; z-index:2; }   /* above card chrome */
.sx-select__button{
  width:100%; text-align:left; padding:12px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background-image:
    radial-gradient(1200px 400px at 20% 0%, rgba(255,45,45,.12), transparent 40%),
    linear-gradient(135deg, rgba(106,166,255,.16), rgba(126,240,214,.16));
  background-color:rgba(0,0,0,.35);
  color:#fff; line-height:1.4; cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,.22), 0 6px 18px rgba(255,0,0,.16);
}
.sx-select__button:focus{
  outline:none;
  box-shadow:0 0 0 4px hsla(352,80%,58%,.40), 0 16px 48px rgba(255,0,0,.35);
}
.sx-select.open .sx-select__button{
  box-shadow:0 18px 36px rgba(0,0,0,.28), 0 26px 70px rgba(255,0,0,.45);
}

/* Dropdown menu: fully opaque and sits above everything nearby */
.sx-select__menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#000;                                /* solid to block clicks + visuals */
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:0;                                      /* no inner gaps */
  max-height:260px; overflow:auto;
  display:none;
  z-index:9999;                                   /* above sibling cards */
  pointer-events:auto;
  box-shadow:0 10px 24px rgba(0,0,0,.5);
}
.sx-select.open .sx-select__menu{ display:block; }

/* Options: remove vertical margins to prevent “peek-through” lines */
.sx-select__menu [role="option"]{
  padding:10px 12px; border-radius:8px;
  margin:0;                                       /* critical: no gaps */
  color:#fff; line-height:1.35;
  background-image:linear-gradient(135deg, rgba(106,166,255,.12), rgba(126,240,214,.10));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sx-select__menu [role="option"]:last-child{ border-bottom:0; }
.sx-select__menu [role="option"][aria-selected="true"]{ outline:1px solid rgba(255,255,255,.35); }
.sx-select__menu [role="option"]:hover{
  background-image:linear-gradient(135deg, rgba(106,166,255,.22), rgba(126,240,214,.20));
}

/* ===== Results panel + pill (final polish) ===== */

/* Panel: stronger, always-on glow (match hover strength) */
.sx-results{
  margin-top:24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:22px 16px 18px;
  background-image:
    radial-gradient(1200px 400px at 20% 0%, rgba(255,45,45,.13), transparent 40%),
    linear-gradient(135deg, rgba(106,166,255,.18), rgba(126,240,214,.18));
  outline:2px solid #1ee99b;
  outline-offset:0;
  /* beefy, static glow (force on) */
  box-shadow:
    0 26px 56px rgba(0,0,0,.40),
    0 0 56px rgba(30,233,155,.48),
    0 0 60px rgba(255,255,255,.42) !important;
}

/* (optional) tiny extra lift on hover */
.sx-results:hover{
  box-shadow:
    0 30px 64px rgba(0,0,0,.42),
    0 0 64px rgba(30,233,155,.50),
    0 0 68px rgba(255,255,255,.45) !important;
}

/* readable column */
.sx-results #sx-results-body{
  text-align:left;
  max-width:980px;
  margin:0 auto;
}

/* Pill — exact CTA base + PERMANENT grey wash + halo */
.sx-results #sx-results-body .sx-results-pill{
  display:block;
  width:max-content;
  margin:0 auto 16px;
  padding:14px 24px;                 /* ~20% bigger */
  border-radius:999px;
  font-weight:700;
  font-size:19px;
  line-height:1.2;
  /* same as CTA + grey wash on top to match the “onselect” look */
  background-image:
    var(--cta-red-spot),
    var(--cta-cool-grad),
    linear-gradient(180deg, rgba(180,180,180,.40), rgba(120,120,120,.26));
  background-color: transparent !important;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow:
    var(--cta-shadow),
    0 0 22px rgba(255,255,255,.50),   /* white glow */
    0 0 18px rgba(30,233,155,.42) !important;  /* green glow */
}

/* ===== Fix: block bleed-through when dropdown menu is open ===== */
body.sx-menu-open .sx-survey > .sx-q {
  pointer-events: none;
}
body.sx-menu-open .sx-survey > .sx-q .sx-select__menu {
  pointer-events: auto; /* keep menu usable */
  position: relative;   /* ensures stacking stays consistent */
  z-index: 10000;
}

body.sx-menu-open { 
  overflow: hidden; 
}



/* =========================================================
   SMARTIVERSE (scoped)
   ========================================================= */

/* Base container usable anywhere */
.sx-container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* Smartiverse section shell + fixed background */
.sv-canvas {
  padding: 40px 0;
  min-height: 100vh;
  position: relative;
  background-color: transparent !important; /* override .sx-section black */
}
.sv-canvas::before {
  content: "";
  position: fixed; inset: 0;
  background: url('/smartiverse-bg.png') center / cover no-repeat;
  z-index: 0; /* sits below content but above page bg */
  pointer-events: none;
}
.sv-canvas > * { position: relative; z-index: 1; } /* ensure content is above stars */

/* Top copy */
section[aria-labelledby="smartiverse-title"] .sv-topcopy {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  margin: 40px auto 32px; max-width: 900px; text-align: center;
}

/* Grid of cards */
section[aria-labelledby="smartiverse-title"] .sx-cards {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important;
  align-items: stretch !important;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  section[aria-labelledby="smartiverse-title"] .sx-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media screen and (max-width: 767px) {
  section[aria-labelledby="smartiverse-title"] .sx-cards { grid-template-columns: 1fr !important; }
}

/* Equal-height cards + selected outline */
section[aria-labelledby="smartiverse-title"] .sx-cards > .sx-card {
  height: 100% !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: flex-start !important;
}
section[aria-labelledby="smartiverse-title"] .sx-card[aria-current="true"] {
  outline: 2px solid #1ee99b !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important; border-radius: 12px;
}

/* Card icon */
.sv-icon { margin-bottom: 12px; }
.sv-icon svg { width: 44px; height: 44px; display: block; }

/* Detail panel spacing */
.sv-panel { margin-top: 16px; }

/* ====== JOIN THE BETA ====== */
#betaForm {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important; max-width: 800px !important; margin: 0 auto !important;
  align-items: start !important; justify-items: stretch !important;
}
#betaForm * { float: none !important; }
#betaForm .row, #betaForm [class*="col-"], #betaForm .form-group {
  margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; box-sizing: border-box !important;
}
#betaForm .field { min-width: 0 !important; }
#betaForm .full, #betaForm .actions { grid-column: 1 / -1 !important; }
#betaForm input, #betaForm textarea, #betaForm select {
  display: block; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  margin: 0; padding: 12px 14px; border-radius: 10px; background: #0b1128 !important; color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.1) !important; outline: none !important;
}
#betaForm textarea { min-height: 140px; resize: vertical; }
#betaForm input::placeholder, #betaForm textarea::placeholder { color: rgba(255,255,255,.7) !important; }
#betaForm .actions { display: flex !important; justify-content: center !important; align-items: center !important; margin: 20px 0 !important; }
#betaForm .sx-submit {
  background: var(--accent, #ff0000) !important; color: #08111e !important; border: none; border-radius: 999px; font-weight: 700;
  padding: 12px 20px; text-decoration: none; cursor: pointer; text-align: center;
}
#betaForm .sx-submit:hover { background: #cc0000 !important; }

/* Beta block spacing + copy width */
.sv-cta--beta { text-align: center; margin-top: 16px; }
.sv-cta--beta h3 { margin-bottom: 6px !important; }
.sv-cta--beta .sv-muted { margin: 0 0 8px !important; }
.sv-cta--beta > p:not(.sv-muted) {
  max-width: 900px !important; margin: 0 auto 16px !important; line-height: 1.6 !important; hyphens: auto;
}
#beta-hint {
  max-width: 900px !important; margin: 16px auto 0 !important;
  font-size: 14px !important; line-height: 1.5 !important;
}

/* Power Pages ghost block nuke: Smartiverse only */
.sv-canvas .sectionBlockLayout,
.sv-canvas .columnBlockLayout {
  display: none !important;
}

/* ===== NAVBAR LINKS — Smartex CTA pill ===== */
.navbar.navbar-inverse .navbar-nav > li > a {
  color: #fff !important;                 /* default: white */
  border-radius: 999px !important;        /* pill */
  padding: 8px 12px !important;
  background: transparent !important;     /* kill portal orange */
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, background 160ms ease;
}

/* Hover / focus / active = CTA gradient + subtle lift */
.navbar.navbar-inverse .navbar-nav > li > a:hover,
.navbar.navbar-inverse .navbar-nav > li > a:focus,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:focus,
.navbar.navbar-inverse .navbar-nav > .active > a:hover {
  background-image: var(--cta-red-spot), var(--cta-cool-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--cta-shadow);
  transform: translateY(-1px);
}

/* Remove any theme-set background that might sneak in */
.navbar.navbar-inverse .navbar-nav > li > a:active {
  background-color: transparent !important;
}

/* ===== FOOTER — Smartex Theme (same look, slimmer) ===== */
footer, .footer, .sx-footer, .footer-bottom {
  background: transparent !important;   /* keep your theme */
  color: #fff !important;
  text-align: center !important;
  font-size: 14px !important;
}

/* Pill/gradient bar + tighter vertical padding */
.footer-bottom {
  background-image: var(--cta-red-spot), var(--cta-cool-grad) !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,.25);
  padding: 6px 0 !important;            /* ↓ was 12px */
  line-height: 1.3 !important;          /* tighter text line */
}

/* Kill extra vertical space Bootstrap adds inside */
footer .container,
.footer-bottom .container { padding-top: 0 !important; padding-bottom: 0 !important; }

footer .row,
.footer-bottom .row { margin-top: 0 !important; margin-bottom: 0 !important; }

footer [class*="col-"],
.footer-bottom [class*="col-"] { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Remove default <p> spacing */
footer p, .footer p, .footer-bottom p { margin: 0 !important; }

/* Accessibility link: no extra gap */
#accessibilityLinkContainer { margin-top: 0 !important; }

/* Links inside footer */
footer a, .footer a { color: #fff !important; text-decoration: none !important; }
footer a:hover, .footer a:hover { text-decoration: underline !important; }

/* ===== Slim footer bar (no visual changes, just height) ===== */
footer { padding-top: 0 !important; padding-bottom: 0 !important; }

footer .footer-bottom {
  padding: 6px 0 !important;            /* <- controls the bar thickness */
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Kill vertical padding/margins from Bootstrap grid + paragraph */
footer .footer-bottom .container,
footer .footer-bottom .row,
footer .footer-bottom [class*="col-"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

footer .footer-bottom p,
footer .footer-bottom small,
footer .footer-bottom span {
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* If the accessibility placeholder is still present, make it inert */
footer #accessibilityLinkContainer { display: none !important; }

/* =========================================================
   BLOGS page — Featured + Grid (final)
   ========================================================= */

/* Center all open-article CTAs (those that reveal panels) */
[data-article-target].sx-cta{
  display:block !important;
  margin:12px auto 0 !important;          /* centers the pill */
}

/* Topic cards use the Smartex card look, but no hover glow */
.blog-grid .sx-card{                       /* base card look */
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background-image:
    radial-gradient(1200px 400px at 20% 0%, rgba(255,45,45,.16), transparent 40%),
    linear-gradient(135deg, rgba(106,166,255,.18), rgba(126,240,214,.18)) !important;
  padding:20px !important;
}
.blog-grid .sx-card.no-glow:hover{
  transform:none !important;
  box-shadow:none !important;              /* kill the red glow/lift on hover */
}

/* Uniform images inside topic cards */
.blog-grid .sx-card img{
  width:100% !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
  border-radius:10px !important;
}

/* =========================================================
   BLOGS page — Featured + Grid (polished)
   ========================================================= */

/* Center all open-article CTAs (those that reveal panels) */
[data-article-target].sx-cta{
  display:block !important;
  margin:12px auto 0 !important;
}

/* ---------- GRID CARDS (uniform height + aligned CTAs) ---------- */
.blog-grid .sx-card{
  display:flex;
  flex-direction:column;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background-image:
    radial-gradient(1200px 400px at 20% 0%, rgba(255,45,45,.16), transparent 40%),
    linear-gradient(135deg, rgba(106,166,255,.18), rgba(126,240,214,.18)) !important;
  padding:20px !important;
}
.blog-grid .sx-card.no-glow:hover{ transform:none !important; box-shadow:none !important; }
.blog-grid .sx-card p{ flex-grow:1; }                           /* pushes CTA down */
.blog-grid .sx-card .sx-cta{ margin-top:12px !important; align-self:center !important; }
.blog-grid .sx-card img{
  width:100% !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
  border-radius:10px !important;
}

/* ---------- FEATURED CARD (text left, image right) ---------- */
.blog-featured .featured-card{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:20px !important;
  align-items:stretch;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background-image:
    radial-gradient(1200px 400px at 20% 0%, rgba(255,45,45,.16), transparent 40%),
    linear-gradient(135deg, rgba(106,166,255,.18), rgba(126,240,214,.18)) !important;
  padding:20px !important;
}
.blog-featured .featured-card:hover{ transform:none !important; box-shadow:none !important; }

.blog-featured .featured-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.blog-featured .featured-text .sx-cta{
  display:block !important;
  width:max-content !important;
  margin:12px auto 0 !important;
  align-self:center !important;
}

/* Image block — perfect corners + fill column height */
.blog-featured .featured-image{ overflow:hidden; border-radius:10px !important; }
.blog-featured .featured-image img{
  width:100% !important;
  height:100% !important;                 /* fill the grid cell vertically */
  aspect-ratio:auto !important;           /* override 16/9 while side-by-side */
  object-fit:cover !important;
  border-radius:0 !important;             /* wrapper provides the rounding */
}

/* ---------- Spacing normaliser ---------- */
.blog-featured{ padding:32px 0 32px !important; }
.blog-grid{     padding:0 0 32px   !important; }
.blog-grid .container > .columnBlockLayout{ margin:0 0 20px !important; }
.blog-grid .container > .columnBlockLayout:last-child{ margin-bottom:0 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  .blog-featured .featured-card{ grid-template-columns:1fr; }
  .blog-featured .featured-image img{
    height:auto !important;
    aspect-ratio:16/9 !important;         /* normal card image when stacked */
  }
}


/* =========================================================
   === ADDED (HOME 3-CARD GRID + MOBILE NAV + OUTLINE ALIAS)
   ========================================================= */

/* Mobile-first: stack; then 2-up; then 3-up */
.sx-cards--three{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
}
@media (min-width:768px){
  .sx-cards--three{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (min-width:1024px){
  .sx-cards--three{ grid-template-columns:repeat(3,1fr) !important; }
}

/* Alias for JS toggle: style .sx-cta--outline like your .button-outline */
a.sx-cta.sx-cta--outline,
.sx-cta.sx-cta--outline {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.36) !important;
  box-shadow: none !important;
}

/* Mobile/collapsed navbar background & toggles — kill orange everywhere */
.navbar.navbar-inverse,
.navbar.navbar-inverse .navbar-collapse,
.navbar.navbar-inverse .navbar-toggle,
.navbar.navbar-inverse .navbar-toggler {
  background:#000 !important;
  border-color: rgba(255,255,255,.20) !important;
}
.navbar.navbar-inverse .navbar-toggle .icon-bar,
.navbar.navbar-inverse .navbar-toggler .icon-bar { background-color:#fff !important; }

/* Power Pages wrapper (if present) — belt-and-braces */
.powerapps-nav .navbar,
.powerapps-nav .navbar-collapse,
.powerapps-nav .navbar-toggler {
  background:#000 !important;
}

/* Force mobile nav toggle icon white */
.navbar-toggler-icon,
.navbar-toggler .icon-bar {
  background-color: #fff !important;
}

/* Mobile toggle (Bootstrap 3) — style the new ☰ / ✕ icons */
.navbar-toggle .icon-hamburger,
.navbar-toggle .icon-close{
  color:#fff !important;
  font-size:26px;
  line-height:1;
  display:inline-block;
  vertical-align:middle;
}

/* (optional) keep legacy bars white if any page still uses them */
.navbar-toggle .icon-bar{ background-color:#fff !important; }

/* Center the main menu on desktop */
@media (min-width: 992px){
  .navbar .menu-bar.navbar-right{ float:none !important; }           /* cancel the right float */
  .navbar .navbar-collapse{ text-align:center; }                     /* center inline-block children */
  .navbar .navbar-nav{ float:none !important; display:inline-block !important; vertical-align:middle; }
}

/* Bigger, bolder mobile toggle icon */
.navbar-toggle{
  padding: 12px 14px;                    /* bigger tap target */
  border: 1px solid rgba(255,255,255,.25); 
  border-radius: 8px;
}

.navbar-toggle .icon-hamburger,
.navbar-toggle .icon-close{
  color:#fff !important;
  font-size:32px;                        /* was 26 */
  font-weight:700;                       /* bold */
  line-height:1;
  display:inline-block;
  vertical-align:middle;
}

/* keep legacy bars white if any page still uses them */
.navbar-toggle .icon-bar{ background-color:#fff !important; }

/* =========================
   BLOGS — mobile refinements
   ========================= */

/* 1) Footer “wander” guard (make sure it stays below content) */
footer, .footer, .footer-bottom{
  position: static !important;
  clear: both !important;
  z-index: 1 !important;
}

/* 2) Featured (Blog 1) — on mobile, show image ABOVE the intro */
@media (max-width: 992px){
  .blog-featured .featured-card{ grid-template-columns: 1fr !important; }
  .blog-featured .featured-image{ order: -1 !important; }     /* move image to top */
  .blog-featured .featured-image img{
    height: auto !important;
    aspect-ratio: 16/9 !important;         /* normal card look when stacked */
  }
}

/* 3) Big empty gap under card text on mobile — remove flex filling */
@media (max-width: 768px){
  .blog-grid .sx-card{ height: auto !important; }
  .blog-grid .sx-card p{ flex-grow: 0 !important; }            /* don't stretch paragraphs */
}

/* Progressive enhancement: only stretch text when a CTA exists */
@supports selector(:has(*)){
  .blog-grid .sx-card p{ flex-grow: 0; }
  .blog-grid .sx-card:has(.sx-cta) p{ flex-grow: 1; }          /* keep “push CTA down” when present */
}

/* (Nice-to-have) tighten inner spacing on small screens */
@media (max-width: 768px){
  .blog-featured .featured-card,
  .blog-grid .sx-card{ padding: 16px !important; }
}

/* =========================================================
   HERO IMAGE — mobile full screen fit
   ========================================================= */
@media (max-width: 768px){
  .sx-hero{
    min-height: 100vh !important;     /* full screen */
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .sx-hero img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;     /* crop gracefully */
    object-position: center !important;
  }
}

/* ===========================================
   BLOGS hero (mobile): fill screen + re-center
   =========================================== */
@media (max-width: 768px){
  /* Make the hero fill the viewport (under the fixed header) */
  #blogs-top{
    min-height: calc(100vh - var(--header-h,56px)) !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Kill the big inline margin and give sensible padding */
  #blogs-top .columnBlockLayout{
    margin: 0 !important;
    padding: 24px 16px !important;
  }

  /* Vertically center the hero content */
  #blogs-top .container{
    min-height: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* =========================================================
   SMARTIVERSE — keep header/toggle always visible on mobile
   ========================================================= */
@media (max-width: 991px){
  /* Make sure the Smartiverse canvas never overlays the header */
  .sv-canvas{ position: relative; z-index: 0 !important; }
  .sv-canvas::before{ z-index: 0 !important; } /* its fixed bg stays below */

  /* Put the header well above Smartiverse */
  .navbar.navbar-inverse{ z-index: 3000 !important; }

  /* Force the hamburger button to stay visible and clickable */
  .navbar-toggle{
    display: block !important;
    position: relative !important;
    z-index: 3001 !important;
  }

  /* Bigger + bolder icon in the button (mobile) */
  .navbar-toggle .icon-hamburger,
  .navbar-toggle .icon-close{
    color:#fff !important;
    font-size:34px;         /* up from 32 */
    font-weight: 800;       /* bolder */
    line-height:1;
    display:inline-block;
    vertical-align:middle;
  }

  /* Slightly larger button hit area */
  .navbar-toggle{
    padding: 12px 16px !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 10px !important;
  }
}
/* Hide skip link unless focused */
.skip-to-content a {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.skip-to-content a:focus {
    left: 10px;
    top: 10px;
    z-index: 5000;
    background: #fff;
    color: #000;
    padding: 6px 10px;
    border-radius: 4px;
}
/* Smartiverse two-column responsiveness */
.sv-two {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
}

/* On mobile, stack instead of forcing two columns */
@media (max-width: 600px) {
    .sv-two {
        grid-template-columns: 1fr !important;
    }

    .sv-two > div:last-child,
    .sv-two svg {
        max-width: 100%;
        margin: 0 auto;
    }
}
/* Mobile: increase header height used for anchor offset */
@media (max-width: 767px) {
  :root {
    --header-h: 80px; /* tweak to 90px if the card is still a bit tucked under */
  }
}